<script setup lang="ts">
// 获取导航栏
import { useNav } from "@/layout/hooks/useNav";
import { ref } from "vue";
import { comp_alloc } from "./components";
import { model_cps, model_migr } from "./components";

defineOptions({
  name: "EdgeCloud"
});
//isCollapsed表示显示或者隐藏
const { isCollapse } = useNav();

const menuList = ref([//一个字符串数组
  { key: "comp_alloc", name: "算力配置", show: true, component: comp_alloc },
  { key: "model_cps", name: "模型压缩", show: true, component: model_cps },
  { key: "org", name: "模型迁移", show: true, component: model_migr },
  // { key: "app", name: "应用管理", show: true, component: Application },
  // { key: "prefix", name: "前缀管理", show: true, component: Prefix },
  // { key: "node", name: "节点管理", show: true, component: Node }
]);

const currentMenu = ref<string>("org");
const toComponent = ref(comp_alloc);

function menuClick(key: string) {
  menuList.value.filter((item: any) => {
    if (item.key === key) {
      currentMenu.value = key;//key
      toComponent.value = item.component;//component字段
    }
  });
}

</script>
<template>
  <div>
    <div v-if="isCollapse" class="w-[160px] h-screen bg-[#fff] absolute overflow-hidden absolute top-0 left-0 p-[20px]"
      :class="isCollapse ? 'menu' : ''">
      <div class="w-[120px] text-center">
        <span class="text-[15px] h-[60px] leading-[60px] text-center">资源接入引擎</span>
      </div>
      <div v-for="item in menuList" :key="item.name" class="h-[48px] mt-[20px]">
        <el-button v-show="item.show" class="btn an-btn" type="primary" @click="menuClick(item.key)">{{ item.name
          }}</el-button>
      </div>
    </div>
    <div :class="isCollapse ? 'dw' : 'hw'" class="ml-auto">
      <Organization />
      <component :is="toComponent" />
    </div>
  </div>
</template>
<style scoped>
.menu {
  animation: closed 0.5s ease-in-out;

  .btn {
    justify-content: left;
    width: 100%;
    height: 100%;
    font-size: 16px;
    border-radius: 8px;
  }
}

@keyframes closed {
  from {
    width: 0;
  }

  to {
    width: 160px;
  }
}

:deep(.el-card) {
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
}
</style>